import React, { Component } from 'react';
import { NavBar, Space, Toast } from 'antd-mobile'
import '../styles/Address.scss'
import service from '../api'
class Address extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            userid: '',
            ischecked:false,
        }
    }
    async componentDidMount() {
        var res = await service.address.address_list({ userid: localStorage.getItem('userid') })
        this.setState({ list: res.data.data })
    }
    new() {
        this.props.history.push('/newadd')
    }
    back() {
        this.props.history.go(-1)
    }
    // 跳转到编辑页面，并传递文档所需参数
    edit(name, tel, province, city, county, addressDetail, addressid,isDefault) {
        this.props.history.push({ pathname: '/edit', state: { name, tel, province, city,  county,  addressDetail, addressid,isDefault } })
    }
    // 跳转到确认订单页
    shopcar(item){
        this.setState({ischecked:!this.state.ischecked})
        this.props.history.push({pathname:'/order',state:{item:item}})
    }
    render() {
        return (
            <div className='address'>
                <div className="top">
                    <NavBar onBack={() => { this.back() }}>
                        地址列表
                    </NavBar>
                </div>
                <div className="box">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className="list" key={index}>
                                    <div className="inputbox">
                                        <input type="checkbox" onChange={()=>{this.shopcar(item)}} checked={this.state.ischecked}/>
                                    </div>
                                    <div className="text">
                                        <div className="wenzi">
                                            <span className='name'>{item.name}</span>
                                            <span className='phone'>{item.tel}</span>

                                            <span className={item.isDefault ? "isisDefault" : ""}> {item.isDefault ? '默认' : ''}</span>

                                        </div>
                                        <div className="dizhi">{item.province}{item.city}{item.county}{item.addressDetail}</div>
                                    </div>
                                    <div className="bianji">
                                        <span className='iconfont icon-bianjishuru-xianxing' onClick={() => { this.edit(item.name, item.tel, item.province, item.city, item.county, item.addressDetail, item.addressid,item.isDefault) }}></span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="btn">
                    <button onClick={() => { this.new() }}>新增地址</button>
                </div>
            </div>
        );
    }
}

export default Address;